<template>
	<div>
		<el-form :model="formData" :rules="rules" size="small" ref="formData" label-width="120px">
			<el-row :gutter="20">
				<el-col :span="8">
					<el-form-item label="店铺名称">{{formData.mallName}}</el-form-item>
					<el-form-item label="店铺编号" prop="shopNo"><el-input v-model="formData.shopNo"></el-input></el-form-item>
					<el-form-item label="店铺发货姓名" prop="shipper"><el-input v-model="formData.shipper"></el-input></el-form-item>
					<el-form-item label="店铺发货电话" prop="shipperPhone"><el-input v-model="formData.shipperPhone"></el-input></el-form-item>
					<el-form-item label="店铺类型">{{formData.type}}</el-form-item>
					<el-form-item label="cbeCode" prop="cbeCode"><el-input v-model="formData.cbeCode"></el-input></el-form-item>
					<el-form-item label="cbeName" prop="cbeName"><el-input v-model="formData.cbeName"></el-input></el-form-item>
					<el-form-item label="状态">
						<el-switch v-model="formData.status"></el-switch>
					</el-form-item>
					<el-form-item label="是否多仓发货" prop="isMoreStore">
						<el-switch v-model="formData.isMoreStore"></el-switch>
					</el-form-item>
					<el-form-item label="备注"><el-input v-model="formData.notes"></el-input></el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="ownerId"><el-input v-model="formData.ownerId"></el-input></el-form-item>
					<el-form-item label="client_id"><el-input v-model="formData.clientId"></el-input></el-form-item>
					<el-form-item label="client_secret"><el-input v-model="formData.clientSecret"></el-input></el-form-item>
					<el-form-item label="loginName"><el-input v-model="formData.loginName"></el-input></el-form-item>
					<el-form-item label="appKey" ><el-input v-model="formData.appKey"></el-input></el-form-item>
					<el-form-item label="ecpCode"><el-input v-model="formData.ecpCode"></el-input></el-form-item>
					<el-form-item label="ecpName"><el-input v-model="formData.ecpName"></el-input></el-form-item>
				</el-col>
			</el-row>
			<el-form-item  style="width:70%; text-align: center;">
				<el-button type="primary" @click="submitForm('formData')">保存</el-button>
				<el-button @click="goPreviousPage">返回</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import { updateUser } from '../../api/apis'
  export default {
    data() {
      return {
        formData: {
					id: "",
					mallName: "",
					shopNo: "",
					shipper: "",
					shipperPhone: "",
					type: "",
					cbeCode: "",
					cbeName: "",
					status: "",
					isMoreStore: "",
					notes: "",
					ownerId: "",
					clientId: "",
					clientSecret: "",
					ecpCode: "",
					ecpName: "",
					loginName: null,
					appKey: "",
        },
        rules: {
          shopNo: [
            { required: true, message: '请输入店铺编号', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10个字符', trigger: 'blur' }
					],
					shipper: [
            { required: true, message: '请输入发货人姓名', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 3 到 5 个字符', trigger: 'blur' }
					],
					shipperPhone: [
            { required: true, message: '请输入发货人手机号', trigger: 'blur' },
            { min: 8, max: 15, message: '长度在 8 到 15 个字符', trigger: 'blur' }
					],
					cbeCode: [
            { required: true, message: '请输入cbeCode', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 6 到 10个字符', trigger: 'blur' }
					],
					cbeName: [
            { required: true, message: '请输入cbeName', trigger: 'blur' },
            { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
    	submitForm(formData) {
				this.$refs[formData].validate( async(valid) => {
						if (valid) {
							let that = this;
							updateUser(this.formData).then(function (res) {
								console.log(res)
								if(res.status === 200 ){
									if(res.data.code == 0){
										that.$message({
											type: 'success',
											message: '修改成功!'
										});
									}else{
										that.$message.error(res.data.msg)
									}
								}
							})
							.catch(function (error) {
									console.log(error);
							});
						} else {
							console.log('error submit!!');
							return false;
						}
				});
	    },
      goPreviousPage() {
        this.$router.replace({ 
					path: "/user",
					query: {
						pageNum: this.currentPage
					}
				});
	    }
    },
    mounted(){
			this.formData = this.$route.query.items;
			this.currentPage = this.$route.query.pageNum;
		}
  }
</script>

<style type="text/css" scoped>
	.edit-form{	
		 width: 480px;
	}  
</style>
 